<template>
  <div class="register_box">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <!-- 头像区域 -->
      <div class="register_head">
        <p id="register_title" style="font-size: 20px">
          <el-button icon="el-icon-back" @click="toLogin">返回登录</el-button>
          <span style="margin-left: 20px">账户注册</span>
        </p>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
        <el-tab-pane label="药品生产商" name="producer">
          <el-scrollbar style="height: 450px">
            <div class="register_form">
              <el-form
                label-width="150px"
                :model="producerRegisterForm"
                class="login_form"
                :rules="producerRegisterFormRules"
                ref="producerRegisterFormRules"
              >
                <!-- 企业名称 -->
                <el-form-item
                  label="企业名称"
                  class="inputbox"
                  prop="companyName"
                >
                  <el-input
                    prefix-icon="el-icon-user"
                    v-model="producerRegisterForm.companyName"
                    placeholder="请输入企业名称"
                    maxlength="10"
                  ></el-input>
                </el-form-item>
                <!-- 企业信用号 -->
                <el-form-item
                  label="企业信用号"
                  class="inputbox"
                  prop="companyRegisterNum"
                >
                  <el-input
                    prefix-icon="el-icon-user"
                    v-model="producerRegisterForm.companyRegisterNum"
                    placeholder="请输入企业注册号"
                    maxlength="10"
                  ></el-input>
                </el-form-item>
                <!-- 经营许可证编号 -->
                <el-form-item
                  label="经营许可证编号"
                  class="inputbox"
                  prop="businessLicenseNo"
                >
                  <el-input
                    prefix-icon="el-icon-user"
                    v-model="producerRegisterForm.businessLicenseNo"
                    placeholder="请输入经营许可证编号"
                    maxlength="10"
                  ></el-input>
                </el-form-item>
                <!-- 药品GMP证书编号 -->
                <el-form-item
                  label="药品GMP证书编号"
                  class="inputbox"
                  prop="GMPCertificateNo"
                >
                  <el-input
                    prefix-icon="el-icon-user"
                    v-model="producerRegisterForm.GMPCertificateNo"
                    placeholder="请输入药品GMP证书编号"
                    maxlength="10"
                  ></el-input>
                </el-form-item>
                <!-- 法人姓名 -->
                <el-form-item
                  label="法人姓名"
                  class="inputbox"
                  prop="legalPersonName"
                >
                  <el-input
                    prefix-icon="el-icon-user"
                    v-model="producerRegisterForm.legalPersonName"
                    placeholder="请输入法人姓名"
                    maxlength="10"
                  ></el-input>
                </el-form-item>
                <!-- 身份证号 -->
                <el-form-item
                  label="身份证号"
                  class="inputbox"
                  prop="legalPersonIdNum"
                >
                  <el-input
                    prefix-icon="el-icon-user"
                    v-model="producerRegisterForm.legalPersonIdNum"
                    placeholder="请输入身份证号"
                    maxlength="18"
                  ></el-input>
                </el-form-item>
                <!-- 手机号码 -->
                <div class="verify">
                  <el-form-item label="手机号码" class="inputbox2" prop="phone">
                    <el-input
                      prefix-icon="el-icon-mobile-phone"
                      type="tel"
                      v-model="producerRegisterForm.phone"
                      placeholder="手机号码"
                      class="phoneInput"
                      maxlength="11"
                    >
                    </el-input>
                  </el-form-item>
                </div>
                <!-- 密码 -->
                <el-form-item label="密码" class="inputbox" prop="password">
                  <el-input
                    prefix-icon="el-icon-lock"
                    v-model="producerRegisterForm.password"
                    type="password"
                    placeholder="请输入6-10位密码"
                    maxlength="10"
                  ></el-input>
                </el-form-item>
                <!-- 确认密码 -->
                <el-form-item
                  label="确认密码"
                  class="inputbox"
                  prop="rePassword"
                >
                  <el-input
                    prefix-icon="el-icon-lock"
                    v-model="producerRegisterForm.rePassword"
                    type="password"
                    placeholder="请再次输入密码"
                    maxlength="10"
                  ></el-input>
                </el-form-item>

                <!-- 验证码 -->
                <!-- <div class="verification">
                  <el-form-item label="验证码" prop="verifyCode">
                    <el-input
                      v-model="producerRegisterForm.verifyCode"
                      placeholder="验证码"
                      maxlength="11"
                    >
                    </el-input>
                  </el-form-item>
                  发送验证码
                  <el-button
                    type="primary"
                    plain
                    class="sendcode"
                    @click="sendcode"
                    :disabled="isSend"
                    >{{ timeNum }}
                  </el-button>
                </div> -->
                <!-- 登陆注册按钮 -->
                <div class="btns">
                  <el-button type="success" round @click="register(1)"
                    >提交注册申请</el-button
                  >
                  <!-- <el-button round @click="toLogin">已有账号，返回登录</el-button> -->
                </div>
              </el-form>
            </div>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="药品经销商" name="distributor">
          <el-scrollbar style="height: 450px">
            <div class="register_form">
              <el-form
                label-width="150px"
                :model="distributorRegisterForm"
                class="login_form"
                :rules="distributorRegisterFormRules"
                ref="distributorRegisterFormRules"
              >
                <!-- 商家名称 -->
                <el-form-item
                  label="商家名称"
                  class="inputbox"
                  prop="businessName"
                >
                  <el-input
                    prefix-icon="el-icon-user"
                    v-model="distributorRegisterForm.businessName"
                    placeholder="请输入商家名称"
                    maxlength="10"
                  ></el-input>
                </el-form-item>
                <!-- 经营许可证编号 -->
                <el-form-item
                  label="经营许可证编号"
                  class="inputbox"
                  prop="businessLicenseNo"
                >
                  <el-input
                    prefix-icon="el-icon-user"
                    v-model="distributorRegisterForm.businessLicenseNo"
                    placeholder="请输入经营许可证编号"
                    maxlength="10"
                  ></el-input>
                </el-form-item>
                <!-- 药品GSP证书编号 -->
                <el-form-item
                  label="药品GSP证书编号"
                  class="inputbox"
                  prop="GSPCertificateNo"
                >
                  <el-input
                    prefix-icon="el-icon-user"
                    v-model="distributorRegisterForm.GSPCertificateNo"
                    placeholder="请输入药品GSP证书编号"
                    maxlength="10"
                  ></el-input>
                </el-form-item>
                <!-- 法人姓名 -->
                <el-form-item
                  label="法人姓名"
                  class="inputbox"
                  prop="legalPersonName"
                >
                  <el-input
                    prefix-icon="el-icon-user"
                    v-model="distributorRegisterForm.legalPersonName"
                    placeholder="请输入法人姓名"
                    maxlength="10"
                  ></el-input>
                </el-form-item>
                <!-- 身份证号 -->
                <el-form-item
                  label="身份证号"
                  class="inputbox"
                  prop="legalPersonIdNum"
                >
                  <el-input
                    prefix-icon="el-icon-user"
                    v-model="distributorRegisterForm.legalPersonIdNum"
                    placeholder="请输入身份证号"
                    maxlength="18"
                  ></el-input>
                </el-form-item>
                <!-- 手机号码 -->
                <div class="verify">
                  <el-form-item label="手机号码" class="inputbox2" prop="phone">
                    <el-input
                      prefix-icon="el-icon-mobile-phone"
                      type="tel"
                      v-model="distributorRegisterForm.phone"
                      placeholder="手机号码"
                      class="phoneInput"
                      maxlength="11"
                    >
                    </el-input>
                  </el-form-item>
                </div>
                <!-- 密码 -->
                <el-form-item label="密码" class="inputbox" prop="password">
                  <el-input
                    prefix-icon="el-icon-lock"
                    v-model="distributorRegisterForm.password"
                    type="password"
                    placeholder="请输入6-10位密码"
                    maxlength="10"
                  ></el-input>
                </el-form-item>
                <!-- 确认密码 -->
                <el-form-item
                  label="确认密码"
                  class="inputbox"
                  prop="rePassword"
                >
                  <el-input
                    prefix-icon="el-icon-lock"
                    v-model="distributorRegisterForm.rePassword"
                    type="password"
                    placeholder="请再次输入密码"
                    maxlength="10"
                  ></el-input>
                </el-form-item>

                <!-- 验证码 -->
                <!-- <div class="verification">
                  <el-form-item label="验证码" prop="verifyCode">
                    <el-input
                      v-model="distributorRegisterForm.verifyCode"
                      placeholder="验证码"
                      maxlength="11"
                    >
                    </el-input>
                  </el-form-item>
                  发送验证码
                  <el-button
                    type="primary"
                    plain
                    class="sendcode"
                    @click="sendcode"
                    :disabled="isSend"
                    >{{ timeNum }}
                  </el-button>
                </div> -->

                <!-- 登陆注册按钮 -->
                <div class="btns">
                  <el-button type="success" round @click="register(2)"
                    >提交注册申请</el-button
                  >
                  <!-- <el-button round @click="toLogin">已有账号，返回登录</el-button> -->
                </div>
              </el-form>
            </div>
          </el-scrollbar>
        </el-tab-pane>
        <el-tab-pane label="药品消费者" name="consumer">
          <el-scrollbar style="height: 450px">
            <div class="register_form">
              <el-form
                label-width="100px"
                :model="consumerRegisterForm"
                class="login_form"
                :rules="consumerRegisterFormRules"
                ref="consumerRegisterFormRules"
              >
                <!-- 姓名 -->
                <el-form-item label="姓名" class="inputbox" prop="userName">
                  <el-input
                    prefix-icon="el-icon-user"
                    v-model="consumerRegisterForm.userName"
                    placeholder="请输入姓名"
                    maxlength="10"
                  ></el-input>
                </el-form-item>
                <!-- 身份证号 -->
                <el-form-item
                  label="身份证号"
                  class="inputbox"
                  prop="userIdCardNum"
                >
                  <el-input
                    prefix-icon="el-icon-user"
                    v-model="consumerRegisterForm.userIdCardNum"
                    placeholder="请输入身份证号"
                    maxlength="18"
                  ></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item label="密码" class="inputbox" prop="password">
                  <el-input
                    prefix-icon="el-icon-lock"
                    v-model="consumerRegisterForm.password"
                    type="password"
                    placeholder="请输入6-16位密码"
                    minlength="6"
                    maxlength="16"
                  ></el-input>
                </el-form-item>
                <!-- 确认密码 -->
                <el-form-item
                  label="确认密码"
                  class="inputbox"
                  prop="rePassword"
                >
                  <el-input
                    prefix-icon="el-icon-lock"
                    v-model="consumerRegisterForm.rePassword"
                    type="password"
                    placeholder="请再次输入密码"
                    maxlength="16"
                  ></el-input>
                </el-form-item>
                <!-- 手机号码 -->
                <div class="verify">
                  <el-form-item label="手机号码" class="inputbox2" prop="phone">
                    <el-input
                      prefix-icon="el-icon-mobile-phone"
                      type="tel"
                      v-model="consumerRegisterForm.phone"
                      placeholder="手机号码"
                      class="phoneInput"
                      maxlength="11"
                    >
                    </el-input>
                  </el-form-item>
                </div>
                <!-- 验证码 -->
                <!-- <div class="verification">
                  <el-form-item label="验证码" prop="verifyCode">
                    <el-input
                      v-model="consumerRegisterForm.verifyCode"
                      placeholder="验证码"
                      maxlength="11"
                    >
                    </el-input>
                  </el-form-item> -->
                <!-- 发送验证码 -->
                <!-- <el-button
                    type="primary"
                    plain
                    class="sendcode"
                    @click="sendcode"
                    :disabled="isSend"
                    >{{ timeNum }}
                  </el-button>
                </div> -->
                <!-- 登陆注册按钮 -->
                <div class="btns" style="margin-top: 50px">
                  <el-button type="success" round @click="register(3)">
                    提交注册申请
                  </el-button>
                </div>
              </el-form>
            </div>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 登陆表单 -->
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Register",
  data() {
    var checkPassForm = (rule, value, callback) => {
      if (!value) {
        return callback(
          new Error("密码6-10位，必须含大小写字母和数字,不含空格")
        );
      }
      let reg = /^(?=\S*[a-z])(?=\S*[A-Z])(?=\S*\d)\S{6,10}$/;
      if (!reg.test(value)) {
        return callback(
          new Error("密码6-10位，必须含大小写字母和数字,不含空格")
        );
      } else {
        callback();
      }
    };
    var checkRePassForm = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请再次输入密码"));
      }
      if (this.activeName === "producer") {
        if (value !== this.producerRegisterForm.password) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      } else if (this.activeName === "distributor") {
        if (value !== this.distributorRegisterForm.password) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      } else if (this.activeName === "consumer") {
        if (value !== this.consumerRegisterForm.password) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      }
    };
    var checkPhone = (rule, value, callback) => {
      this.phoneValid = false;
      if (!value) {
        return callback(new Error("手机号不能为空"));
      }
      let reg = /^0?1[3|4|5|6|7|8|9][0-9]\d{8}$/;
      if (!reg.test(value)) {
        return callback(new Error("请输入正确的手机号码"));
      } else {
        this.phoneValid = true;
        callback();
      }
    };
    var checkverifyCode = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("验证码不能为空"));
      }
      callback();
    };
    return {
      //药品生产商注册表单
      producerRegisterForm: {
        companyName: "",
        companyRegisterNum: "",
        legalPersonName: "",
        businessLicenseNo: "",
        GMPCertificateNo: "",
        password: "",
        rePassword: "",
        phone: "",
        verifyCode: "",
        legalPersonIdNum: ""
      },
      //药品经销商注册表单
      distributorRegisterForm: {
        businessName: "",
        legalPersonName: "",
        businessLicenseNo: "",
        GSPCertificateNo: "",
        password: "",
        rePassword: "",
        phone: "",
        verifyCode: "",
        legalPersonIdNum: ""
      },
      //药品消费者注册表单
      consumerRegisterForm: {
        userName: "",
        userIdCardNum: "",
        password: "",
        rePassword: "",
        phone: "",
        verifyCode: "",
        sessionId: ""
      },
      activeName: "producer",
      phoneValid: false,
      timeNum: "发送验证码",
      isSend: false,
      //药品生产商注册信息表单验证规则
      producerRegisterFormRules: {
        username: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        companyName: [
          { required: true, message: "请输入企业名称", trigger: "blur" }
        ],
        companyRegisterNum: [
          { required: true, message: "请输入企业注册号", trigger: "blur" }
        ],
        legalPersonName: [
          { required: true, message: "请输入法人姓名", trigger: "blur" }
        ],
        businessLicenseNo: [
          { required: true, message: "请输入经营许可证编号", trigger: "blur" }
        ],
        GMPCertificateNo: [
          { required: true, message: "药品GMP证书编号", trigger: "blur" }
        ],
        password: [
          { required: true, validator: checkPassForm, trigger: "blur" }
        ],
        rePassword: [
          { required: true, validator: checkRePassForm, trigger: "blur" }
        ],
        phone: [{ required: true, validator: checkPhone, trigger: "blur" }],
        verifyCode: [
          { required: true, validator: checkverifyCode, trigger: "blur" }
        ],
        legalPersonIdNum: [
          {
            required: true,
            max: 18,
            min: 18,
            message: "请输入正确的身份证号码",
            trigger: "blur"
          }
        ]
      },
      //药品经销商注册信息表单验证规则
      distributorRegisterFormRules: {
        username: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        businessName: [
          { required: true, message: "请输入企业名称", trigger: "blur" }
        ],
        companyRegisterNum: [
          { required: true, message: "请输入企业注册号", trigger: "blur" }
        ],
        legalPersonName: [
          { required: true, message: "请输入法人姓名", trigger: "blur" }
        ],
        businessLicenseNo: [
          { required: true, message: "请输入经营许可证编号", trigger: "blur" }
        ],
        GSPCertificateNo: [
          { required: true, message: "药品GSP证书编号", trigger: "blur" }
        ],
        password: [
          { required: true, validator: checkPassForm, trigger: "blur" }
        ],
        rePassword: [
          { required: true, validator: checkRePassForm, trigger: "blur" }
        ],
        phone: [{ required: true, validator: checkPhone, trigger: "blur" }],
        verifyCode: [
          { required: true, validator: checkverifyCode, trigger: "blur" }
        ],
        legalPersonIdNum: [
          {
            required: true,
            max: 18,
            min: 18,
            message: "请输入正确的身份证号码",
            trigger: "blur"
          }
        ]
      },
      //药品消费则注册信息表单验证规则
      consumerRegisterFormRules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        userIdCardNum: [
          {
            required: true,
            max: 18,
            min: 18,
            message: "请输入正确的身份证号码",
            trigger: "blur"
          }
        ],
        companyRegisterNum: [
          { required: true, message: "请输入企业信用号", trigger: "blur" }
        ],
        legalPersonName: [
          { required: true, message: "请输入法人姓名", trigger: "blur" }
        ],
        businessLicenseNo: [
          { required: true, message: "请输入经营许可证编号", trigger: "blur" }
        ],
        GSPCertificateNo: [
          { required: true, message: "药品GSP证书编号", trigger: "blur" }
        ],
        password: [
          { required: true, validator: checkPassForm, trigger: "blur" }
        ],
        rePassword: [
          { required: true, validator: checkRePassForm, trigger: "blur" }
        ],
        phone: [{ required: true, validator: checkPhone, trigger: "blur" }],
        verifyCode: [
          { required: true, validator: checkverifyCode, trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    login() {
      this.$router.push("/login");
    },
    toLogin() {
      this.$emit("toLogin");
    },
    register(type) {
      //药品生产商
      switch (type) {
        case 1:
          this.$refs.producerRegisterFormRules.validate(async (valid) => {
            if (!valid) return this.$message.error("请检查表单信息!");
            await axios
              .post("api/v2/register/manufacturer", {
                company_name: this.producerRegisterForm.companyName,
                register_id: this.producerRegisterForm.companyRegisterNum,
                password: this.producerRegisterForm.password,
                license_id: this.producerRegisterForm.businessLicenseNo,
                phone: this.producerRegisterForm.phone,
                legal_person: this.producerRegisterForm.legalPersonName,
                GMPID: this.producerRegisterForm.GMPCertificateNo,
                id_number: this.producerRegisterForm.legalPersonIdNum
              })
              .then((res) => {
                console.log(res);
                if (res.data.code !== 0) throw new Error("注册失败!");
                this.$message({
                  message: "提交注册申请成功!",
                  type: "success",
                  duration: 2000
                });
                this.toLogin();
              })
              .catch(() => {
                return this.$message.error("注册失败");
              });
          });
          break;
        //药品经销商
        case 2:
          this.$refs.distributorRegisterFormRules.validate(async (valid) => {
            if (!valid) return this.$message.error("请检查表单信息!");
            await axios
              .post("api/v2/register/distributor", {
                company_name: this.distributorRegisterForm.businessName,
                password: this.distributorRegisterForm.password,
                license_id: this.distributorRegisterForm.businessLicenseNo,
                phone: this.distributorRegisterForm.phone,
                legal_person: this.distributorRegisterForm.legalPersonName,
                GMPID: this.distributorRegisterForm.GSPCertificateNo,
                id_number: this.distributorRegisterForm.legalPersonIdNum
              })
              .then((res) => {
                if (res.data.code !== 0) throw new Error("注册失败!");
                this.$message({
                  message: "提交注册申请成功!",
                  type: "success",
                  duration: 2000
                });
                this.toLogin();
              })
              .catch(() => {
                return this.$message.error("注册失败");
              });
          });
          break;
        //消费者注册
        case 3:
          this.$refs.consumerRegisterFormRules.validate(async (valid) => {
            if (!valid) return this.$message.error("请检查表单信息!");
            await axios
              .post("api/v2/register/consumer", {
                name: this.consumerRegisterForm.userName,
                password: this.consumerRegisterForm.password,
                id_number: this.consumerRegisterForm.userIdCardNum,
                phone: this.consumerRegisterForm.phone
              })
              .then((res) => {
                if (res.data.code !== 0) throw new Error("注册失败!");
                this.$message({
                  message: "注册成功!",
                  type: "success",
                  duration: 2000
                });
                //跳转主页
                this.$router.push("home");
              })
              .catch(() => {
                this.$message.error("注册失败");
              });
          });
          break;
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    async sendcode() {
      if (!this.phoneValid) {
        return this.$message.error("请输入正确的手机号码");
      } else {
        const res = await this.$http.get(
          "verify?phone=" + this.registerForm.phone
        );
        //console.log(res);
        if (res.data.code == -3) {
          return this.$message.error("用户已存在");
        }
        this.registerForm.sessionId = res.data.data;
        this.isSend = true;
        this.setTime();
      }
    },
    setTime() {
      if (this.isSend) {
        var second = 60;
        let timer = setInterval(() => {
          second--;
          this.timeNum = second + "秒后可重发";
          if (second <= 0) {
            this.isSend = false;
            clearInterval(timer);
            this.timeNum = "发送验证码";
          }
        }, 1000);
      }
      //console.log("设置");
    }
  }
};
</script>

<style lang="less" scoped>
.register_box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 8%;
}

.register_form {
  width: 480px;
}

//底部按钮组样式
.btns {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: relative;
  bottom: 7px;
  .el-button {
    margin: 5px;
    width: 60%;
  }
}

/deep/.inputbox .el-form-item__label {
  font-size: 16px;
  text-align: right;
}

.login_form {
  margin-top: 10px;
}

/deep/
  .el-form-item.is-required:not(.is-no-asterisk)
  > .el-form-item__label:before {
  content: "";
}
</style>
<style lang="less">
.inputbox2 {
  //display: flex;
  // width: 90%;

  .el-form-item__label {
    text-align: right;
  }

  .el-form-item__content {
    .el-input--prefix {
      .el-input__inner {
        width: 90%;
        height: 46px;
        border-radius: 100px;
      }
    }
  }
}

.verification {
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  width: 92%;
  .el-form-item {
    flex: 2;
  }
  .sendcode {
    margin-left: 10px;
    margin-bottom: 22px;
    flex: 1;
  }
}
.el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>